<template>
	<view class="content">
		<view class="bg">
			<swiper class="swiper" previous-margin="54rpx" next-margin="54rpx" :indicator-dots="indicatorDots" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
			  <swiper-item v-for="(itt,idx) in item" :key="idx">
				<hm-cover-card @click="like" :options="itt" :index="index==idx?true:false" :idx="idx"></hm-cover-card>
			 </swiper-item>
			  </swiper>
		</view>
	</view>
</template>

<script>
	import HmCoverCard from '@/components/yang-cover-card/index.vue'
	export default {
		components: { HmCoverCard },
		data() {
			return {
				title: 'Hello',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				circular: false,
				item:[],
				index:0,
				
			}
		},
		onLoad(){
			this.getLoginCode();
		},
		async onShow() {
			this.item = [];
			this.init();
		},
		onPullDownRefresh() { 
			this.item = [];
		  setTimeout(() => {
		  this.init();   
		    uni.hideNavigationBarLoading();
		    // 停止下拉动作
		    uni.stopPullDownRefresh();
		  }, 1000);
		},
		methods: {
			change(e){
				console.log(e)
				this.index = e.detail.current
				//this.init();
			},
			async init(){
				uni.showLoading({
					title:'加载中...'
				})
				
				let items = this.$api.Index_item
				uni.hideLoading();
				items.map((itd)=>{
					let options = {
						id:itd.id,
							entryPic:itd.good_cover,
							title: itd.name,
							text: itd.content,
							zan:itd.zan,
							shoucang:
							'/static/hm-cover-card/images/img_25361_0_0.png'
						}
					this.item.push(options)
				})
			},
			like(val){
				console.log(val)
				if(val.zan){
					this.item[val.idx].zan++
				}else{
					this.item[val.idx].zan--
				}
				//this.init();
			},
			getLoginCode() {
				uni.login({
					success(res) { 
						uniCloud.callFunction({
							name: 'loginWithWechat',
							data: {
								js_code: res.code
							},
							success(res) {
								console.log('res.result.data.openid',res.result.data.openid)
								uni.setStorageSync('userId',res.result.data.openid)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		width: 100%;
		height: calc(100vh);
		position: relative;
		background-image: linear-gradient(to bottom, rgb(61, 131, 109), #fff);

		.bg {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: calc(100vh);
			box-sizing: border-box;
			flex-direction: column;
			.swiper{
				width: 100%;height: 100%;
				
				swiper-item{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					flex-direction: column;
				}

				/deep/ .box {
					box-shadow: none;
				}
			}


		}

	}
</style>
